<template>
  <el-container style="height: 100vh">
    <el-aside width="260px">
      <div class="sidebar">
        <div class="t-drawer_header">
          <h1 style="font-weight: bolder; font-size: 21px">YouChat</h1>
          <el-button class="new-chat-button" size="small">
            <i class="el-icon-chat-line-round"></i>
            <span>新建对话</span>
          </el-button>
        </div>

        <div class="t-drawer_footer">
          <div class="user-info">
            <el-avatar :size="32" :src="circleUrl"></el-avatar>
            <span class="username">新用户</span>
            <i class="el-icon-s-tools"></i>
          </div>
        </div>
      </div>
    </el-aside>

    <el-main>
      <div class="chat-container">
        <div class="chat-header">
          <h2>新对话</h2>
        </div>

        <div class="chat-messages">
          <div class="welcome-message">
            <p>
              嗨~👋
              我是YouChat，能帮你答疑、读文档、搞创作，轻松搞定工作，享受生活！🎉
            </p>
          </div>
        </div>

        <div class="input-area">
          <div class="dialog-box">
            <div class="dialog-content">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="有问题，尽管问，shift+enter换行"
                v-model="inputText"
                resize="none"
                class="dialog-input"
              ></el-input>
            </div>
            <div class="dialog-footer">
              <div class="footer-left">
                <el-dropdown
                  trigger="click"
                  class="model-selector"
                  @command="handleModelChange"
                >
                  <el-button class="dropdown-button">
                    {{ selectedModel
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        v-for="model in models"
                        :key="model"
                        :command="model"
                      >
                        {{ model }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

                <el-button
                  class="function-button"
                  :class="{ 'is-selected': isButtonSelected }"
                  @click="toggleButtonSelection"
                >
                  深度思考
                </el-button>
              </div>
              <el-button
                type="primary"
                class="send-button"
                icon="el-icon-s-promotion"
                @click="sendMessage"
              ></el-button>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      inputText: "",
      selectedModel: "DeepSeek",
      models: ["DeepSeek", "GPT-4", "Claude"],
      isButtonSelected: false,
    };
  },
  name: "AIBot_Home",
  methods: {
    sendMessage() {
      if (this.inputText.trim()) {
        console.log("发送消息:", this.inputText);
        this.inputText = "";
      }
    },
    handleModelChange(model) {
      this.selectedModel = model;
    },
    toggleButtonSelection() {
      this.isButtonSelected = !this.isButtonSelected;
    },
  },
};
</script>

<style scoped>
.el-aside {
  background-color: #f3f3f3;
  width: 260px;
  display: flex;
  flex-direction: column;
}

.sidebar {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.t-drawer_header {
  padding: 20px 16px;
}

.user-info {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-icon-chat-line-round {
  font-size: 16px;
  margin-right: 8px;
}

.el-icon-s-tools {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: color 0.3s;
}

.el-icon-s-tools:hover {
  color: #409eff;
}

.new-chat-button {
  width: 100%;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 30px 0 0 0;
  transition: box-shadow 0.2s ease-in-out;
  height: 42px;
  font-weight: bold;
}

.new-chat-button:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.t-drawer_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  border-top: 1px solid #e5e5e5;
  background-color: #f3f3f3;
}

.username {
  font-size: 14px;
  color: #333;
}

.el-main {
  background-color: #ffffff;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 16px 24px;
}

.chat-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.welcome-message {
  text-align: center;
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  margin-top: 20px;
}

.input-area {
  position: relative;
  padding: 16px 24px;
  background-color: #fff;
  width: 60%;
  margin: 0 auto;
  padding-bottom: 50px;
}

.dialog-box {
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  width: 100%;
  margin: 0 auto;
}

.dialog-content {
  padding: 12px;
  width: 100%;
  margin: 0 auto;
}

.dialog-input :deep(.el-textarea__inner) {
  border: none;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  box-shadow: none !important;
  min-height: 60px !important;
}

.dialog-input :deep(.el-textarea__inner)::placeholder {
  color: #999;
}

.dialog-footer {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-button {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 20px;
  background-color: #fff;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
}

.dropdown-button:hover {
  border-color: #409eff;
  color: #409eff;
}

.function-button {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 20px;
  background-color: #fff;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
}

.send-button {
  padding: 6px 12px;
  border-radius: 10px;
}

.function-button.is-selected {
  background-color: #409eff;
  color: white;
}
</style>
